<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/classification.css">
    <title>团购APP分类</title>
</head>
<body>

    <header class="clearfix">
        <div class="back fl">
            <button>Back</button>
        </div>
        <div class="dizhi fr">
            <select name="" id="">
                <option value="">广州市</option>
                <option value="">深圳市</option>
            </select>
        </div>
        <div class="fenlei">
            <p>分类</p>
        </div>


    </header>

    <div id="main">
        <div class="music clearfix">
            <div class="fl">
                <a href="Product details.html"><img src="img/flimg/fl1.png" alt=""></a> 
                <p>美食</p>
            </div>
            <div class="fl">
                    <a href=""><img src="img/flimg/fl2.png" alt=""></a> 
                <p>电影</p>
            </div>
            <div class="fl">
                    <a href=""><img src="img/flimg/fl3.png" alt=""></a> 
                <p>运动</p>
            </div>
            <div class="fl">
                    <a href=""><img src="img/flimg/666_03.png" alt=""></a> 
                <p>唱歌</p>
            </div>
        </div>
        <div class="dian">
            <a href="">
                <div></div>
            </a>
            <a href="">
                <div></div>
            </a>
            <a href="">
                <div></div>
            </a>
            <a href="">
                <div></div>
            </a>
        </div>
        <div class="msl">
            <div>
                <img src="img/flimg/ms.png" alt="">
                <p>美食类</p>
            </div>
            <div>
                <p>更多</p>
               <img src="img/flimg/icon2.png" alt=""> 
            </div>
            
        </div>
        <div class="tupian">
                <ul class="clearfix">
                        <li class="fl"><img src="img/flimg/ms1.png" alt=""></li>
                        <li class="fl"><img src="img/flimg/ms2.png" alt=""></li>
                        <li class="fl"><img src="img/flimg/ms3.png" alt=""></li>
                        <li class="fl"><img src="img/flimg/ms4.png" alt=""></li>
                    </ul>
        </div>
        <div class="msl">
                <div>
                    <img src="img/flimg/yd.png" alt="">
                    <p>运动类</p>
                </div>
                <div>
                    <p>更多</p>
                   <img src="img/flimg/icon2.png" alt=""> 
                </div>
                
            </div>
            <div class="tupian">
                    <ul class="clearfix">
                            <li class="fl"><img src="img/flimg/yd1.png" alt=""></li>
                            <li class="fl"><img src="img/flimg/yd2.png" alt=""></li>
                            <li class="fl"><img src="img/flimg/yd3.png" alt=""></li>
                            <li class="fl"><img src="img/flimg/yd4.png" alt=""></li>
                        </ul>
            </div>
            <div class="msl">
                    <div>
                        <img src="img/flimg/dy.png" alt="">
                        <p>电影类</p>
                    </div>
                    <div>
                        <p>更多</p>
                       <img src="img/flimg/icon2.png" alt="">
                    </div>
                    
                </div>
                <div class="tupian">
                        <ul class="clearfix">
                                <li class="fl"><img src="img/flimg/dy1.png" alt=""></li>
                                <li class="fl"><img src="img/flimg/dy2.png" alt=""></li>
                                <li class="fl"><img src="img/flimg/dy1.png" alt=""></li>
                                <li class="fl"><img src="img/flimg/dy2.png" alt=""></li>
                            </ul>
                </div>
        


    </div>


    <footer>
            <ul class="clearfix">
               <li class="fl">
                    <a href="index.html"><img src="img/flimg/11_03.png" alt=""></a>
                    <p>首页</p>
                </li>
               <li class="fl">
                            <a href="classification.html"><img src="img/flimg/22_06.png" alt=""></a>
                            <p>分类</p>
                   </li>
                    <li class="fl">
                            <a href="find.html"><img src="img/syimg/discover.png" alt=""></a>
                            <p>发现</p>
                    </li>
                    <li class="fl">
                            <a href="My.html"><img src="img/syimg/person.png" alt=""></a>
                            <p>我的</p>
                    </li>
        
                </ul>
    </footer>
    <script>
            
                
                    document.body.style.height = window.innerHeight + "px";
                
                    /*动态改变根元素字体大小*/
                    function recalc() {
                        // 获取客户端宽度
                        var clientWidth = document.documentElement.clientWidth;
                        if(!clientWidth) return;
                        // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
                        document.documentElement.style.fontSize = 100 * (clientWidth / 750) + 'px';
                        
                    }
                    // 初始化计算rem
                    function initRecalc() {
                        
                        recalc();
                        // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
                        var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
                        if(!document.addEventListener) return;
                        window.addEventListener(resizeEvt, recalc, false);
                        document.addEventListener('DOMContentLoaded', recalc, false);
                    }
                    initRecalc();
                        
                        
                        
             </script>  
    
</body>
</html>